
@media screen and (max-width:1200px){
    #container nav a{
        font-size:1.1em;
    }
    .footInfo div{
        margin:0 1.5em ;
    }
   
}
/*@media screen and (min-width: 400px) and (max-width: 700px) { … }*/
@font-face {
  font-family: Oswald;
  src: url(../fonts/Oswald.woff) format("woff");
}
#headerDiv{
    height: 135px;
    background-color:#fff;
    
}
 .footInfo{
        min-height:12em;
    }
#logoDiv{
    font-family: Oswald, arial, serif;
    width:940px;
    padding:0px;
    margin:0px;
    height:88px;
    line-height: 88px;
    text-align: left;
    margin-left:auto;
    margin-right: auto;
}

.bannerText{
    font-family: Oswald, arial, serif;
    font-size: 40px;
}
.bannerText img{
    width: 220px;
    height: 50px;
}
#siteDescription{
    font-family: arial, serif;
    margin-left: 20px;
    font-size: 15px;
}
#menuDiv{
    background-color: #666;
}
#menuLista{
    font-family: Oswald;
    list-style: none;
    line-height: normal;
    margin-bottom: 0px;
}

#menuLista li{
    color: white;
    font-size: 16px;
    line-height: 37px;
    height: 37px;

    text-decoration: none;
    cursor: default;
    display: block;
    float: left;
}
#menuLista a{
    text-decoration: none;
    cursor: pointer;
    color: white;
}
#menuLista li:hover{
     background-color: rgb(156,217,102);
}
#menuLista span i{
    margin-top: 5%;
}
#menuLista span{
    padding: 20px;
    padding-top: 0px;
    padding-bottom: 0px;
    line-height: 37px;
    height: 37px;
}
#menuLista .current{
    background-color: rgb(156,217,102);
}
#menuFooter{
   background-color: rgb(156,217,102);
    width: 100%;
    height: 10px;
    display: block;
    left: 0px;
}


#sonido{
    float:right;
}

/* End - Header */





body{
    height:100%;
    max-width:100%; 
    min-width:940px;
    margin:0  auto;    
    word-wrap:break-word;   
}
#capa{   
    background-image:url(../images/nosotros.jpg);background-repeat: no-repeat;background-size:100% 100%;
    border-radius:2em;
    overflow:hidden;
    height:45em;
}
#capa section{
    height:100%;
    overflow:auto; 
}
.video{
    text-align: center;
    margin: 1em;
    overflow:visible;
}
.visionImg{
    text-align: center;    
}
.visionImg img{    
    height: auto;
    border: solid 0.5em;
    border-radius: 0.5em;
}
#headpage{    
    z-index:2;  
    height:10em;  
}
header{
    width:100%;
    height:50%;   
    overflow:hidden;
    background-color:#555;    
}
header nav{
    float:right;
    display:inline;
        
}

header h1{
    color:#ddd;
    margin-left:1em;
    font-size:3em;    
}
header h2{
    margin-left:1em;
    color:#FFFFE0;
}
header #faceTwit{
    float:right;
}
header #faceTwit img{
    margin:0 1em;
}

#izBarContain{
    border-radius:8px;
    float:left;
    height:45em;   
    margin-right:0;    
}

section{    
    float:left;
    width:90%;         
}

#nosotros aside{
    background-color:#fff;
}
.infoNosotros{
    text-align:center;
    width:48%;
    margin:1%;
    float:left;
}
.infoNosotros h3{
    opacity:0.9;
    background:#eee;
    text-align:center;
}
.manInfo{
    height:18em;
}
.infoNosotros img{
    width:20em;    
    margin:0.3em;
}
aside{
    border-radius:8px;
    float:right;
    width:20%;
    margin-left:1em;
    margin:0;
    background-color:#eee;
}

#container{
    margin:auto; 
    height:auto;    
}

#container #nosotros nav a{
  display:block;  
  color:#000; 
  text-transform:uppercase;
  font-family:Comic Sans MS;
  border:solid 1px #aaa;
  border-radius:0.3em;
  text-align:center;  
  font-size:1em;
    
  text-decoration:none; 
  margin:2em 1em 2em 1em;
  padding:1em;  
  background:#aaa;
  width:8em;
  /*
 transition:width 1s;
 -webkit-transition:width 1s;
 -moz-transition:width 1s;*/
}
#container #nosotros nav a:hover{
  text-decoration:none;
  color:#eee;  
 /* width:8.5em;*/
  background:#888;  
}
footer{
  clear:both;  
  background:#333;
  border-top:6px solid #ddd;
}
/***/
footer a{
    display:inline-block;
    width:45%;
    margin:2%;
}
/**/
footer h3{
    font-size:2em;
    color:#ccc;
    text-align:center;
 }
footer h5{
  color:#ccc;  
  text-align:center;
  font-size:1em;
  font-family:Agency FB,Niagara Solid;
  
}
footer h6{   
  letter-spacing:0.3em;  
  font-size:1.2em;
  text-align:center; 
  font-family:chiller;
}

article header{
    height:5em;
    background:none;
}

article header h2{
    color:#000;
    margin:0;
    background:#ccc;
    opacity:0.7;
    padding:0 2%;
    font-family:Times New Roman;
    font-size:2em;
    text-align:center;
}
article footer{
    background:#3A5FCD;
    height:3em;
}
#iz,#der{
    background:#888;    
    color:#fff;
    position:relative;
    width:5%;    
    height:45em;
    text-align:center;
    cursor:pointer;
      
}
#iz{
    float:left;
    border-radius:2em 0 0 2em;
}

#der{
    float:left;
    border-radius:0 2em 2em 0;
}
#iz:hover,#der:hover{background:#666;}


#nosotros article:nth-of-type(1){
    display:block;
}
#nosotros article{
    display:none;
    overflow:auto;
}
#nosotros article p{
    margin:2em;
    font-weight:bold;
    text-align:justify;
    font-family:Georgia,Arial,Times New Roman;
}
#nosotros article:nth-of-type(4) img{    
    width:18%;
    height:18%;
    opacity:0.8;
    float:left;
    margin:2em;
}

#CenterGrid{
    float:left;
    background:#bbb;
    width:76%;
    margin-left:3%;
    border-radius:2em;
    
}
.barra{
    background:#ddd;
    height:2em;
    border-radius:8em;
}
#tecnology{
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: 0px;
    clear:both; 
    text-align:center;
}

#tecnology img{   
    border-radius:2em;
    margin:2em 4em;
    width:12em;
    height:12em;
}
/*****************/
/*    NOTICAS    */
/*****************/

#newsGrid{
    margin-left:5%;
    float:left;
    width:70%;
}
#newsGrid #capaNews{    
    overflow:hidden;
}
#newsGrid section{
    width:100%;
}

#derBarNews{
    float:left;
    border-radius:0.5em;
    background:#eee;
    width:20%;
    margin-left:2.5%;
    margin-right:2.5%;     
}
#BarNews h3{
    font-size:1.5em;
    margin:1em;
    color:#000;
    text-align:center;
}
#BarNews h3 span{
    color:#006400;
}    
#capaNews article{
    padding:1em;
    background:#fff;
    margin-bottom:2em;
    border:solid 0.1em #ccc;
}
#capaNews article h2{
    font-size:3em;
    font-family:Castellar,Algerian,impact;
    font-weight:bold;
    text-transform:uppercase;
    background:#FFDAB9;
    color:#000;
    }
#capaNews article .newsArtDiv{
    width:50%;    
    float:left;
    
}
#capaNews article p{
    clear:both;
    overflow:hidden;
    margin:1em 2em;
    text-align:justify;
}
.imgparrafo{
    text-align:center;
}
.imgparrafo img{
    max-width:50%;
}
.separador{
    clear:both;    
}
.footInfo h4{
    text-align:center;
    padding:0.5em;
}
.footInfo p{
    text-align:justify;
    margin:0.5em;
}
.footInfo{
    float:left;    
    border-top: 5px solid #ccc;
    border-bottom: 5px solid rgb(135,135,135);
    background:#bbb;
    border-radius:1em;
    width:20%;
    margin:1%;    
}
.footInfo h4{
    text-align:center;
}
.footInfo a{
    text-decoration:none;
    color:#000;
}
.footInfo img{
    margin:0 0.5em;
}
.footInfo div:nth-of-type(1) p{
    width:40%;
    float:left;
}
.footerInfo{
    float: right;
    width: 30%;
    margin:1%;
    text-align: center;
}
.footerInfo img{
    margin: 0 auto;
    width: 220px;
    height: 50px;
}

#borderAside{    
    border-radius:8px;
    border:solid;
    height:45em;
}
aside img{
    width:4em;
    float:left;
    margin:5px;
}

/*************/
/*CONTACTANOS*/
/*************/

figure{
    background: #f1f4c6;
    margin:0.5em;
    overflow:hidden;    
    border-bottom: 0.2em solid #d1d693;
    border-top: 0.2em solid #d1d693;
}

#centerContact{
    background:#fff;
    float:left;
    overflow:hidden;
    width:55%;
    border:solid 0.1em #ccc;
    border-radius:0.6em;
    margin:0 0 0 6%;
}
#contact figure{
    display:none;
    margin:3em 1em;
    
}
#contact aside{
    display:none;
    min-height:40em;
    width:32%;
    margin-right:5%;
    background-color:#fff;
    border:solid 0.1em #ccc;
    
}
#contact aside img{
    width:4em;
    float:left;
    margin:5px;
}
#contact aside h5{
    padding:0.5em;
    border-bottom:solid 0.1em #d9e072;
    color:#747c04;
    text-align:center;
    font-size:2em;
    margin:1em;
}
#contact section{
    width:100%;
}
.emailContact img{
    width:100%;
    height:8em;    
}
.telContact{    
    overflow:auto;
    clear:both; 
    text-align:center;   
}

.celular p{
    text-align:justify;
    float:left;
    margin:1em;
}
.telContact div p img{
    width:2em;
    margin-right:1em;
    border-radius:8px;
    
}
.resaltar{
    color:rgb(81, 109, 54);
    font-weight:bold;
}
.division{
    width:45%;
    margin:2%;
    overflow:hidden;
    float:left;
}
.correo,.celular{
    padding:1em;
    margin-bottom:1em;
    border-radius:1em;
    background:#eee;
    overflow:hidden;
}

.telContact img{
    margin:auto;
    width:18em;
}
#contact form{
    float:left;
    width:40%;
    margin-left:20%;
}
.response{
    margin-top:10em;
    width:auto;    
    float:left;   
}

#boton-submit{
    margin-bottom:2em;
    display:block;
}
/********/
/* HOME */
/********/

#nosotros,#news,#contact{
    margin-top:4em;
    overflow:hidden;
    margin-bottom:3em;
   
}
#home{
    overflow:auto;
    display: block;
    width:100%;
    height:50em;
}
#home section{
    width:100%;
    height:100%;
}
.presentacion{
    text-align:center;
    height:100%;   
    
}
.presentacion iframe{
        width:60%;
        margin:4em;
}
.presentacion div{
    margin-top:4em;
    background:#eee;
    opacity:0.8;
    height:100%;
    border-top:solid 0.1em #ccc;
}
.presentacion div img{
    margin:2em;
    width:5em;
    background:#fff;
}
.presentacion div a{
    background:#fff;
    height:100%;
    margin:2em;
}
#centerHome,#kodevian{
    height:100%;
}

#googleKodevian{
    float:left;
    width:10%;
    height:100%;
    border-right:solid 0.1em #aaa;
    background:#F1F1F1;
}
#desplazable a{
    display:block;
}
#home nav{
    text-align:center;
}
#home nav a{    
    display:block;
    color:#000;
    width:90%;
    border-radius:2em;
    margin:10% auto;
}

#home nav img{
    border-radius:0.6em;
    margin:1em 0;
    width:6em;
}
#home nav a:hover{
    background: #efd;
    cursor:pointer;
    text-decoration:none;
    font-weight:bold;
}

/*probando disenio nuevo*/
#kodevian section article{
    text-align:justify;
}

#home section article img{
    width:8em;
}
#home section article{  
    margin:1%;  
    float:left;
    background:#eee;
    width:46%;
    border-radius:2em;
    padding:1%;
}
#home section article:nth-of-type(2n+1){
    clear:both;
    float:right;
} 
#kodevian section:nth-of-type(2),#kodevian section:nth-of-type(3){
    display:none;
}
#kodevian section article header{
 background:#aaa;
 text-transform:uppercase;
 text-align:center;
 color:#fff;
 margin:0;
 font-weight:bold;
 border-radius:1em;
 height:3em;
}

.articleimg{
    border-radius:1em;
    width:20%;
    float:left;
    margin:0.5em;
}
/**/
#kodevian{    
    background-repeat:no-repeat;
    background-size:100% 100%;
    overflow:hidden;
}

#tutos{   
    overflow:auto;
    height:42em;
    width:80%;
    text-align:center;
    border-radius:0.5em;
    margin:1em auto;
    
}
#tutos h3{
    text-align:center;
    text-transform:uppercase;
    color:rgb(72, 135, 13);
    opacity:0.8;
}
#tutos a{    
    margin:3em 3em;
    
}
.circulo{
    float:left;
    width:14em;
    height:14em;
    padding:1em;
    margin:1em;
    border:solid 0.1em #9CD966;
    border-radius:50%;
    background:#e3edb4;

}
.circulo:hover{
    background:#e2efa2;

}
#tutos img{
    width:8em;
} 

/***********/
/*  Fases  */
/***********/
#fasesDesarrollo{
    overflow:hidden;
    margin-bottom:3em;    
}
#default{
    text-align:center;
    width:40%;
    float:left;     
    color:rgb(75, 119, 34);
}
#default img{
    margin:8em 0em 2em 0em;
}
#default h3{
    color:#153;
}
#descripcion{
    float:left;
    text-align:justify;
    width:52%;
}
#descripcion div{
    width:70%;
    margin:0 3em;
    clear:both;    
}
#descripcion div:nth-of-type(2n){
    float:right;
}
.numero{
    float:left;
    width:15%;
}
.introMetodo{
    background:#f4f9b8;
    padding:1em;
    margin-bottom:2em;
}
.materialHeader{
    background:#eef;
    padding:1em;
    margin-bottom:2em;
}

.introMetodo h3,.materialHeader h3{
    margin:0;
    font-size:1.5em;
    color:#999;
    text-transform:uppercase;   
    text-align:center;
}
.parrafo{
    width:85%;
    display:block;
    float:left;
}
.numero span{
    background:#555;    
    border-radius:50%;
    color:#fff;
    float:left;   
    margin:0.5em 0; 
    font-size:2em;
    padding:0.5em;
}
#tiempo-coste{    
    text-align:justify;
    display:block;
    clear:both;
}
#tiempo-coste img{
    width:3em;
    float:left;
}
#tiempo-coste div{
    margin:2% 3% 0 3%;
    width:42%;
    border-radius:0.5em;
    background:#eee;
    padding:1%;
    float:left;
}
#tiempo-coste div p{
    text-align:justify;
}
/************/
/*  Galeria */
/************/
#modalGalery{
    display:none;
    position:fixed;
    top:0;
    right:0;
    width:100%;
    height:100%;
}
.btnclose{
    text-align:right;
    float:right;
}
.clonar img{
    margin:2em;
    max-width:80em;
    max-height:42em;
}
#modalGalery #grupo{
    text-align:center;
    width:90%;
    margin:2% auto;
    background:#000;
    border-radius:1em;
}


/************/

/***************/
/*    MODAL    */
/***************/
.projectCambio{
 position:fixed;
 top:0;
 right:0;
 width:100%;
 height:100%;
 }
#opaco{
    position:relative;
    width:100%;
    height:100%;
    background:#000;
    opacity: 0.5;
    -moz-opacity: 0.5;
    filter:alpha(opacity=5);
}
#absoluto{    
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
}



/**********/
/* Scroll */
/**********/
::-webkit-scrollbar {
    width: 12px;
    background: #fff;
    -webkit-box-shadow: inset 0 0 3px #000;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px #eee;
    
}

::-webkit-scrollbar-thumb {
    
    background: #ccc;
    -webkit-box-shadow: inset 0 0 6px #aaa;
}
